<template>
	<!-- 发表评价 -->
	<view class="Jy_commodity_page">
		<view class="commodity_container">
			<view class="commodity_box"><u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"></u-upload></view>
			<view class="commodity_box">
				<view class="score_group">
					<view class="scrore_title_box">
						<view class="shop_image_box"><image src="http://120.78.177.187:8083/crmebimage/public/mpImage/home/logo.png" mode="aspectFill"></image></view>
						<view class="score_text_box"><text>综合评分</text></view>
					</view>
					<view class="score_up_box"><u-rate :count="scoreCount" v-model="scoreValue" activeColor="#ff7500" size="21"></u-rate></view>
				</view>
			</view>
			<view class="commodity_box">
				<view class="textarea_box"><textarea value="" placeholder="多多描述商品和使用感受, 更受欢迎哦" /></view>
			</view>
		</view>
		<view class="commodity_button_group">
			<view class="commodity_button_box"><text>提交评价</text></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			fileList1: [],
			scoreCount: 5,
			scoreValue: 0
		};
	},
	methods: {
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map(item => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: res => {
						setTimeout(() => {
							resolve(res.data.data);
						}, 1000);
					}
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import 'commodityEvaluation.scss';
</style>
